import { Alert } from "@mui/material";
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
import "./toast.less";
export default function Toast() {
  const { isShow, message, type } = useSelector(
    (state: IStoreState) => state.toastData
  );
  const dispatch = useDispatch();
  useEffect(() => {
    // 只有当前是显示状态，才需要过一会把它隐藏
    if (!isShow) return;
    setTimeout(() => {
      dispatch({ type: "Toast_Hide" });
    }, 2000);
  }, [isShow]);
  return (
    <div className="toast" style={{ display: isShow ? "block" : "none" }}>
      <Alert severity={type}>{message}</Alert>
    </div>
  );
}
